<template>
  <div class="integralRanking">
    <div class="outermostMargin">
      <div class="carousel">
        <!-- <div class="speLabel" @click="toRules">
          <p>签到规则</p>
        </div> -->
        <div class="header">
          <div class="headerImg">
            <p>{{rate || 0}}</p>
          </div>
          <div class="wdjf">我的积分</div>
        </div>
      </div>
      <div class="mainBody">
        <div class="listBox">
          <div class="title listItem">社区积分排名</div>
        </div>
        <div class="listBox">
          <div class="listItem distribution">
            <div class="left">
              <div class="row">排名</div>
              <div class="row"></div>
              <div>名称</div>
            </div>
            <div class="right">积分</div>
          </div>
          <div class="listItem distribution" v-for="(v,i) in items" :key="i">
            <div class="left">
              <div class="Row" :style="v.style">
                <!-- <span>{{i + 1}}</span> -->
                <span>{{v[4]}}</span>
              </div>
              <div class="Row" style="background: #f5f5f5;"></div>
              <!-- <div class="nickName" style="flex: 1;">{{ v.accountName }}</div> -->
              <div class="nickName" style="flex: 1;">{{v[2]}}</div>
            </div>
            <!-- <div class="right">{{v.score}}</div> -->
            <div class="right">{{v[3]}}</div>
          </div>
          <div style="height: 60px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rate: "",
      items: [
        {
          row: "1",
          nickName: "第一名",
          times: "291",
          style: {
            backgroundImage: 'url("../../assets/integralRanking/first.png")',
            backgroundRepeat: "no-repeat",
            backgroundSize: "100% 100%"
          }
        },
        {
          row: "2",
          nickName: "第二名",
          times: "290",
          style: {
            backgroundImage: "url('../../assets/integralRanking/second.png')",
            backgroundRepeat: "no-repeat",
            backgroundSize: "100% 100%"
          }
        },
        {
          row: "3",
          nickName: "第三名",
          times: "289",
          style: {
            backgroundImage: 'url("../../assets/integralRanking/third.png")',
            backgroundRepeat: "no-repeat",
            backgroundSize: "100% 100%"
          }
        },
        {
          row: "4",
          nickName: "其他名次",
          times: "20",
          style: {
            backgroundImage: 'url("../../assets/integralRanking/othres.png")',
            backgroundRepeat: "no-repeat",
            backgroundSize: "100% 100%"
          }
        }
      ]
    };
  },
  created(){
    this.post("/account/getAccountIntegra", {
      userId: this.slow.userInfo ? this.slow.userInfo.openId : "8a4c60a171078ece01710a26363a00cc",
      wxId: this.slow.userInfo ? this.slow.userInfo.openId : "8a4c60a171078ece01710a26363a00cc"
    }).then(r => {
      this.rate = r.map['积分'];
    })

    this.post("account/getAccountIntegraRank?dataAreaCode=" + localStorage.getItem("dataAreaCode"), {
     
    }).then(r => {
      this.items = r.list;
    })
  },
  methods: {
    toRules() {
      this.$toast.fail("该标签尚在开发中");
      setTimeout(() => {
        this.$toast.clear();
      }, 1000);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/smobile.scss";

.integralRanking {
  height: 100%;
  width: 100%;

  .outermostMargin {
    background: #f5f5f5;
    color: $sm-text-color;
    font-size: $sm-font-size-lg;
    width: 100%;
    height: 100%;

    overflow: auto;
    overflow-x: hidden;
    .carousel {
      //   background-color: #f5f5f5;
      position: relative;
      z-index: 0;
      margin: 0;
      padding: 0;
      height: $sm-img-per-mini;
      width: $sm-img-per-max;
      background-image: url("../../assets/integralManage/header.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .speLabel {
        position: absolute;
        z-index: 10;
        top: 15px;
        right: -100px;

        height: 50px;
        width: 200px;
        p {
          margin: 10px 20px;
          color: white;
          //   font-weight: bold;
        }

        background-image: url("../../assets/integralRanking/speLabel.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .header {
        display: flex;
        flex-direction: column;
        align-items: center;

        .headerImg {
          background-color: rgb(248, 148, 76);
          margin-top: 21%;
          height: 18vw;
          width: 18vw;
          display: block;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          p {
            font-size: 26px;
            color: white;
          }
        }
        .wdjf{
          margin-top: 1vw;
        }
      }
    }
    .mainBody {
      display: flex;
      flex-direction: column;
      align-items: center;

      .listBox {
        width: 100%;
        height: 100%;
        .listItem {
          width: 100%;
          padding: 1% 6%;
        }
        .title {
          display: flex;
          align-items: flex-start;
          background-color: #d1d1d1;
          font-weight: bold;
        }
        .distribution {
          width: 90%;
          display: flex;
          flex-direction: row nowrap;
          justify-content: space-between;
          .left {
            // width: 50%;
            display: flex;
            flex-direction: row nowrap;
            justify-content: flex-start;

            .row {
              height: 24px;
              width: 32px;
              margin: 0 10px;
            }

            .Row {
              height: 24px;
              width: 24px;
              margin: 0 15px;

              display: block;
              border-radius: 50%;
              background-color: rgb(248, 148, 76);

              display: flex;
              flex-direction: column;
              align-items: center;
              span {
                padding: 4px 0 0 0;
                color: white;
                font-size: 3.1vw;
              }
            }
          }
        }
      }
    }
  }
}
</style>